<!-- 待付款订单 / 待发货订单 -->
<template>
  <el-dialog
    class="gl_dialog_TitleLine gl_dl_footer"
    width="1080px"
    :title="title"
    :visible.sync="orderDialogVisible"
    :close-on-press-escape="false"
    :before-close="handleClose"
  >
    <div>
      <el-scrollbar ref="scroll" v-loading="dialogLoading" wrap-class="scrollbar-wrapper gl_dialog_height">
        <el-table class="gl_table_noBorder gl_mb_15" :data="tableData" size="mini">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table :data="props.row.orderMall" class="gl_table_childrenThead" size="mini" style="width: 100%;">
                <el-table-column label="订单信息">
                  <template slot-scope="{row}">
                    <div class="order_img gl_dis_ib gl_middle">
                      <img v-if="row.productImageUrl" :src="getStaticFileUrl(row.productImageUrl)" alt="" style="width:100%; height:100%">
                    </div>
                    <div :title="row.productName" class="gl_dis_ib gl_middle gl_mx_10 gl_ellipsis" style="width: 280px">{{ row.productName }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="productNum" label="数量" width="200" />
              </el-table>
            </template>
          </el-table-column>
          <el-table-column prop="orderNo" label="订单号" width="170" align="center" />
          <el-table-column prop="creatorName" label="付款方" />
          <el-table-column prop="creationTime" label="下单时间" :width="140" align="center">
            <template slot-scope="{row}">
              <span v-if="!row.creationTime || row.creationTime == '0001-01-01T00:00:00'">- -</span>
              <span v-else>{{ row.creationTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="payAmount" label="付款金额" align="center">
            <template slot-scope="{row}">
              <span>¥{{ (row.payAmount / 100).toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="isOnlinePayment" label="付款渠道" :width="70" align="center">
            <template slot-scope="{row}">
              <span v-if="row.isOnlinePayment">线上支付</span>
              <span v-else>线下支付</span>
            </template>
          </el-table-column>
          <el-table-column v-if="title !== '待付款订单'" prop="payDateTime" label="付款时间" :width="140" align="center">
            <template slot-scope="{row}">
              <span v-if="!row.payDateTime || row.payDateTime == '0001-01-01T00:00:00'">- -</span>
              <span v-else>{{ row.payDateTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="title !== '待付款订单'" prop="channelTypeCode" label="付款方式" :width="70" align="center">
            <template slot-scope="{row}">
              <p v-if="row.channelTypeCode">
                <span v-for="(ktem, index) in dict.channelType" :key="index">
                  {{ ktem.code === row.channelTypeCode ? ktem.value: '' }}
                </span>
              </p>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="orderStatusCode" label="订单状态" :width="70" align="center">
            <template slot-scope="{row}">
              <p v-if="row.orderStatusCode">
                <span v-for="(ktem, index) in dict.orderStatus" :key="index">
                  {{ ktem.code === row.orderStatusCode ? ktem.value: '' }}
                </span>
              </p>
            </template>
          </el-table-column> -->
          <el-table-column prop="businessRemark" label="备注">
            <template slot-scope="{row}">
              {{ row.businessRemark || '- -' }}
            </template>
          </el-table-column>
          <el-table-column v-if="title === '待付款订单'" fixed="right" label="操作" :width="180" align="center">
            <template slot-scope="{row}">
              <el-button v-if="row.orderStatusCode == 'WAIT_BUYER_PAY' && row.isOnlinePayment == false" type="text" size="mini" @click="collection(row.orderNo)">
                <span class="gl_color_success">确认收款</span>
              </el-button>
              <el-button v-if="row.orderStatusCode == 'WAIT_BUYER_PAY' && row.isOnlinePayment == false" type="text" size="mini" @click="cancelOrder(row.orderNo)">
                <span class="gl_color_warning">取消订单</span>
              </el-button>
              <el-button size="mini" type="text" @click="detail(row.orderNo)">详情</el-button>
            </template>
          </el-table-column>
          <el-table-column v-else fixed="right" label="操作" :width="140" align="center">
            <template slot-scope="{row}">
              <template v-if="row.orderStatusCode == 'TRADE_FINISHED' || row.orderStatusCode == 'TRADE_SUCCESS'" v-auth="['Mall']">
                <el-button v-if="row.expressInfo || row.expressName" type="text" size="mini" @click="deliver(row)">
                  <span class="gl_color_warning">修改发货信息</span>
                </el-button>
                <el-button v-else type="text" size="mini" @click="deliver(row)">
                  <span class="gl_color_success">订单发货</span>
                </el-button>
              </template>
              <el-button size="mini" type="text" @click="detail(row.orderNo)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
      <el-row style="text-align: right;" class="gl_pb_15 gl_mr_15">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-size="form.MaxResultCount"
          :current-page="form.Page"
          @size-change="sizeChange"
          @current-change="pageIndexChange"
        />
      </el-row>
      <DetailDialog ref="detailDialog" />
      <div v-if="$store.state.user.roles.includes('Mall')"><DeliverGoods ref="deliverGoods" /></div>
    </div>
    <!-- <div slot="footer">
      <el-button size="mini" @click="orderDialogVisible = false">关闭</el-button>
    </div> -->
  </el-dialog>
</template>

<script>
import DetailDialog from './detailDialog';
import { mapState, mapActions } from 'vuex';
import {
  api_GET_TradeMallOrderList,
  api_PUT_TradeBusinessOrderConfirmTheProceeds,
  api_PUT_TradeCancellationOfOrder
} from '@/extend/api/swaggerApi/app.js';
import DeliverGoods from './deliverGoods';
import {
  Api_GET_TradeMallOrderListQO
} from '@/lib/form/swaggerForm';
import auth from '@/lib/directives/auth';
export default {
  components: {
    DetailDialog,
    DeliverGoods
  },
  directives: {
    auth
  },
  data() {
    return {
      orderDialogVisible: false,
      dialogLoading: false,
      title: '', // 弹窗标题
      total: 0,
      form: new Api_GET_TradeMallOrderListQO(),
      tableData: []
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict,
      DelegationId: state => state.user.rootDelegationId
    })
  },
  created() {
    this.getDict();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    // 打开弹窗
    open(storeId, title) {
      this.title = title;
      this.orderDialogVisible = true;
      this.form.StoreId = storeId;
      this.getOrderData();
    },
    // 获取订单数据
    getOrderData(page) {
      var that = this;
      that.form.Page = page || 1;
      that.form.SkipCount = (that.form.Page - 1) * that.form.MaxResultCount;
      if (that.title === '待付款订单') {
        that.form.OrderStatusCode = 'WAIT_BUYER_PAY';
        that.form.IsDeliver = null;
      } else {
        that.form.OrderStatusCode = 'TRADE_FINISHED';
        that.form.IsDeliver = false;
      }
      that.dialogLoading = true;
      api_GET_TradeMallOrderList(that.form).then(res => {
        that.dialogLoading = false;
        that.tableData = res.items || [];
        that.total = res.totalCount;
      }, (error) => {
        that.dialogLoading = false;
        that.$message({ type: 'error', message: '获取订单失败！' + (error.error && error.error.message || '') });
      });
    },
    // 取消订单
    cancelOrder(id) {
      var that = this;
      this.$confirm('您确定要取消订单吗?', '取消订单', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.dialogLoading = true;
        const data = { orderNo: id };
        api_PUT_TradeCancellationOfOrder(data).then(res => {
          that.$message({
            type: 'success',
            message: '取消成功!'
          });
          that.dialogLoading = false;
          that.getOrderData(that.form.Page);
        }).catch(() => {
          that.dialogLoading = false;
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '放弃取消'
        });
      });
    },
    // 确认收款
    collection(id) {
      var that = this;
      this.$confirm('您确定已经线下支付该费用吗?', '确认收款', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.dialogLoading = true;
        const data = { orderNo: id };
        api_PUT_TradeBusinessOrderConfirmTheProceeds(data).then(res => {
          that.$message({
            type: 'success',
            message: '收款成功!'
          });
          that.dialogLoading = false;
          that.getOrderData(that.form.Page);
        }).catch(() => {
          that.dialogLoading = false;
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    // 订单发货
    deliver(item) {
      const express = {
        id: item.expressId,
        name: item.expressName
      };
      const data = item.details ? JSON.parse(item.details) : {};
      this.$refs.deliverGoods.open(item.orderNo, data.ConsigneeName, data.PhoneNumber, data.Address, express, item.expressInfo);
    },
    handleClose(done) {
      this.$parent.getData();
      done();
    },
    // 查看详情
    detail(orderNo) {
      this.$refs.detailDialog.open(orderNo);
    },
    // 图片回显
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    // 分页
    sizeChange: function(MaxResultCount) {
      this.form.MaxResultCount = MaxResultCount; // 每页显示条目数
      this.getOrderData();
    },
    pageIndexChange(currentPage) {
      this.getOrderData(currentPage);
    }
  }
};
</script>

<style lang="scss" scoped>
.order_img {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  overflow: hidden;
}
.gl_dialog_height{
  height: 600px;
  overflow: hidden;
}
</style>
